<template>
  <!-- 订单 -->
  <!-- 订单列表 -->
    <view class="page">
         <view class="header-top flex  font-size-15 font-color-888 bac-color-fff">
            <text
                class="header-item font-size-15"
                v-for="(tab , i) in tab_list"
                :key="i"
                :class="{'active':i==tab_index}"
                @click="changeTab(i)"
            >{{tab.name}}</text>
        </view>
        <view class="order-list bac-color-fff mar-t-13" v-if="list.length>0">
            <view class="order-list-item flex pos-rel"  v-for="(item,index) in list" :key="index"> 
                <image class="image" :src="item.info.images[0]" mode="aspectFill">

                </image>
                <view class="flex-1 mar-l-15 pos-rel">
                    <view class="font-color-333">{{item.info.name}}</view>
                    <view class="mar-t-15 font-color-888"> x {{item.buy_num}}</view>
                    <view class="flex pos-abs pay-price font-bold font-size-18 font-color-price align-end">
                        <mk-icon :src="''" :height="16" :width="16"></mk-icon>
                        <view class="mar-l-3">{{item.pay_score}}</view>
                    </view>
                </view>
                <view class="status pos-abs text-center un-lq" v-if="item.status==1">
                    待发货
                </view>
                <view class="status pos-abs text-center ylq" v-else>
                    已发货
                </view>
            </view>
        </view>
        <no-data v-else></no-data>
    </view>
</template>

<script>
import {scoreOrderList} from '@/utils/http'
// import VConsole from 'vconsole'
// new VConsole()

export default {
    data(){
        return {
            tab_list:[
				{
					name: '全部',
					status: '',
				},
				{
					name: '待发货',
					status: 1,
				},
				{
					name: '已发货',
					status: 2,
				},
			],
            tab_index:0,
            index_page: 0,
			total_page: 1,
            list: []
        }
    },
    methods:{
        //初始化数据
		init() {
            this.index_page= 0,
			this.total_page= 1,
            this.list= []
		},
        changeTab(i) {
           
            if(this.tab_index != i){
                this.tab_index = i
                 this.init() 
                 this.scoreOrderList();
            }
			
			// const current_tab = this.tab_list[this.tab_index]
			// if (current_tab.index_page == 0) {
			// 	//this.getOrderList()
			// }
		},
        scoreOrderList(){
            scoreOrderList({page:this.index_page,status:this.tab_list[this.tab_index].status}).then(res=>{
                if(res){
                    this.index_page = res.current_page;
                    this.total_page = res.last_page
                    this.list =[...this.list, ...res.data]
                }
            })
        }
    },
    	//下拉刷新
	onPullDownRefresh() {
        this.init()
		// this.getCate()
		this.scoreOrderList()
	},
	//上拉加载
	onReachBottom() {
		if (this.index_page < this.total_page) {
			this.scoreOrderList()
		}
	},
    onLoad(){
        
        if(this.index_page < this.total_page){
            this.scoreOrderList()
        }
        
    }
}
</script>

<style scoped>
page{
    background-color: #F6F6F6;
}
.header-top {
	padding: 15px 10px;
}
.header-item{
    width: 80px;
    text-align: center;
}
.header-top .active {
	font-weight: bold;
	color: #0088ff !important;
}
.order-list-item {
    padding: 17px 21px;
}
.order-list-item .image{
    height: 92px;
    width: 92px;
    border-radius: 5px;
}
.status{
    height: 30px;
    line-height: 30px;
    width: 75px;
    right: 10px;
    bottom: 20px;
    background-color: #ccc;
}
.un-lq{
    background-color: #0088ff;
    color: #fff;
}
.ylq{
    color: rgb(243, 243, 243);
    background-color: #c1c1c2;
}
.pay-price{
    bottom: 5px;
    font-size: 16px;
    line-height: 18px;
}
</style>